<template>
    <navtop :head="head" :name="username"></navtop>
    <div class="photoDetail">
        <div>
           <div class="swiper-container">
                <div class="swiper-wrapper"> 
                    <div class="swiper-slide" v-for="(item,index) in photos" :key="index"> 
                        <img :src="item"/> 
                    </div> 
                </div>
                <div class="swiper-pagination"></div>
            </div> 
        </div>
        <p class="description">{{desc}}</p>
    </div>
    <nav2 :like="likeCount" :star="starCount" :toLike="toLike" :toStar="toStar"></nav2>
</template>

<script>
import {reactive,toRefs,onMounted,onBeforeMount} from 'vue';
import Swiper,{Pagination,Autoplay} from 'swiper';
Swiper.use([Pagination,Autoplay]);
import 'swiper/swiper-bundle.css';
import {useRoute} from 'vue-router'
import navtop from '../../components/Nav.vue'
import nav2 from '../../components/NavBottom.vue'
import axios from 'axios'

export default{
    components:{
        navtop,nav2
    },
    setup(){
        const state=reactive({
            head:'',
            username:'',
            photos:[],
            likeCount:0,
            starCount:0,
            desc:""
        })
        const toLike=(num)=>{
            state.likeCount=state.likeCount+num;
        }
        const toStar=(num)=>{
            state.starCount=state.starCount+num;
        }
        const route=useRoute();
        onMounted(() => {
            new Swiper('.swiper-container',{
                loop: true,
                observer: true,
                autoplay: {
                    delay: 3000,//延迟时长
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,//允许分页点击跳转
                }
            });
        })
        onBeforeMount(async() => {
            state.id=route.query.id; 
            let res=await axios.get("photoInfo/"+state.id+".json").then(res=>res.data.data[0].note_list[0])
            let images=res.images_list;
            for(let i=0;i<images.length;i++){
                state.photos.push(images[i].url);
            }
            state.head=res.user.image;
            state.username=res.user.name;
            state.desc=res.desc;
            state.likeCount=res.liked_count;
            state.starCount=res.collected_count;
        })
        return {...toRefs(state),toLike,toStar}
    }
}
</script>

<style scoped>
.photoDetail{
    width: 375px;
    height: 565px;
    overflow: auto;
}
.swiper-container{
    /* margin-top: 20px; */
    width: 375px;
    height: 350px;
    border-radius: 2px;
}
.swiper-container img{
    width:375px;
    height: 350px;
    object-fit: cover;
}
.swiper-pagination-bullet-active{
    background: black;
}
.description{
    white-space: pre-wrap;
    width: 345px;
    margin: 20px auto;
    font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei',' 微软雅黑', Arial, sans-serif;
    line-height: 20px;
    font-size: 14px;
}
</style>